<template>
	<cmDialog v-model="visible" :modal-title="update ? '新增' : '修改'">
		<div style="padding: 20px 40px">
			<el-form ref="updateRoleRef" :model="updateRoleForm" :rules="updateRoleRules" label-width="80px">
				<el-form-item label="角色名称" prop="name">
					<el-input v-model="updateRoleForm.name" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="角色说明" prop="describe">
					<el-input v-model="updateRoleForm.describe" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="updateRoleForm.status" class="ml-4">
						<el-radio label="1">正常</el-radio>
						<el-radio label="2">禁止</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="权限配置">
					<el-tree
						show-checkbox
						:data="menuList"
						node-key="id"
						:default-expand-all="true"
						check-strictly
						:render-after-expand="false"
						style="width: 100%"
						clearable
						@check-change="handleCheckChange"
					/>
				</el-form-item>
			</el-form>
			<div class="dialog-foot">
				<el-button @click="handleAddCancel">取消</el-button>
				<el-button type="primary" @click="handleAddFormSubmit(updateRoleRef)">确定</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script lang="ts" setup>
import cmDialog from '@/components/cm-dialog/index.vue'
import { ref, reactive, computed, onMounted } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'
import { useUserInfoApi } from '@/api/sys/user'

const visible = ref(false)
const update = ref(false)
const menuList = ref([])

const updateRoleForm = reactive<{ name: string; status: string; describe: string }>({
	status: '正常',
	name: '1',
	describe: '角色说明'
})

const updateRoleRules = reactive<FormRules>({
	name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
	status: [{ required: true, message: '请输入状态', trigger: 'change' }],
	describe: [{ required: true, message: '请输入角色说明', trigger: 'blur' }]
})
const updateRoleRef = ref<FormInstance>()

const init = (isUpdate: boolean, row: any) => {
	visible.value = true
	update.value = isUpdate

	if (isUpdate) {
		// isUpdate  true-新增  、false-编辑row有数据 反显
		// 重置画面数据
	}

	// 菜单列表
	getMenuList()
}
// 获取菜单列表
const getMenuList = async () => {
	const { data } = await useUserInfoApi() // 获取用户信息
	menuList.value = data.menuList
}
// 点击树节点事件处理
const handleCheckChange = (data: Object) => {}

const handleAddCancel = () => {
	updateRoleRef.value?.resetFields()
	visible.value = false
}

const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	visible.value = false
}
defineExpose({
	init
})
</script>
<style scoped>
.dialog-foot {
    text-align: center;
}
</style>
